<template>
  <!-- 排行榜 -->
  <div id="top">
    <div class="top-box">
          <SongListCover
      class="top-item"
      :coverInfo="{
        id: item.id,
        count: item.playCount,
        picUrl: item.coverImgUrl,
        name: item.name,
      }"
      v-for="item in topList"
      :key="item.id"
    />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import SongListCover from "@/components/SongListCover";
export default {
  components:{
    SongListCover
  },
  computed: {
    ...mapState({
      topList: (state) => state.top.topList,
    }),
  },
  mounted() {
    this.$store.dispatch("topList");
  },
};
</script>

<style lang='less'>
#top {
  margin: 20px 30px;
  .top-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  .top-item{
          margin-top: 15px;
      width: 18%;
      padding: 1%;
  }
  }

}
</style>